<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form class="permission-form" :form="form">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-decorator="['id']" hidden />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色名称" hasFeedback>
        <a-input
          placeholder="起一个名字：A_name"
          v-decorator="['code', { rules: [{ required: true, message: '角色名称不能为空' }] }]"
        />
      </a-form-item>

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态" hasFeedback validateStatus="success">
        <a-select v-decorator="['status', { initialValue: 0 }]">
          <a-select-option :value="0">启用</a-select-option>
          <a-select-option :value="1">禁用</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色简介" hasFeedback>
        <a-input
          :rows="5"
          placeholder="角色简介：管理员"
          v-decorator="['name', { rules: [{ required: true, message: '角色简介不能为空' }] }]"
        />
      </a-form-item>

      <!-- <a-divider>拥有权限</a-divider>

      <a-form-item label="角色" name="actions" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
        <a-select
          style="width: 100%"
          mode="multiple"
          v-decorator="['actions', { rules: [{ required: true, message: '角色权限不能为空' }] }]"
          :allowClear="true"
        >
          <a-select-option v-for="(action, index) in RolesLists" :key="index" :value="action.value">
            {{ action.label }}
          </a-select-option>
        </a-select>
      </a-form-item> -->
    </a-form>
  </a-modal>
</template>

<script>
// import { getPermissions } from '@/api/manage'
// import pick from 'lodash.pick'

export default {
  name: 'RoleModal',
  data() {
    return {
      RolesLists: [],
      title: '新增角色',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      // mdl: {
      //   actions: [] // 初始化为默认选中的值
      // },

      form: this.$form.createForm(this),
      permissions: []
    }
  },
  created() {
    // this.loadPermissions()
  },
  mounted() {
    // console.log('mounted')
  },
  methods: {
    // 验证状态的动态显示
    validateStatus(fieldName) {
      const { getFieldError, isFieldTouched } = this.form
      if (isFieldTouched(fieldName) && getFieldError(fieldName)) {
        return 'error'
      }
      return 'success'
    },
    add() {
      console.log('add')

      this.visible = true
      this.title = '新增角色'
      this.form.setFieldsValue({
        id: '',
        code: '',
        name: '',
        status: 0
      })
      // this.loadPermissions()
    },
    watch(record) {
      console.log('watch', record)
      this.title = '查看角色'
    },
    edit(record) {
      this.mdl = Object.assign({}, record)
      this.visible = true
      console.log('数据', this.mdl)
      this.title = '编辑角色'

      this.$nextTick(() => {
        // this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'code', 'status'))
        this.form.setFieldsValue({
          id: this.mdl.id,
          code: this.mdl.name,
          status: this.mdl.status,
          name: this.mdl.code
        })
      })
      // console.log('this.mdl', this.mdl)
    },
    close() {
      // this.$emit('close')

      this.visible = false
    },
    handleOk() {
      // // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('form values', values)
          // console.log(this)
          if (values.id > 0) {
            console.log('修改')
            const tabledate = this.$removeSpacesFromObject(values)
            this.$http.put('/sysRole/update', tabledate).then((res) => {
              console.log('res', res)
              if (res.code === 200) {
                this.$message.success('修改成功')
                this.$emit('ok')
              }
            })
          } else {
            const tabledate = this.$removeSpacesFromObject(values)
            this.$http.post('/sysRole/insert', tabledate).then((res) => {
              console.log('res', res)
              if (res.code === 200) {
                this.$message.success('保存成功')
                this.$emit('ok')
              }
            })
          }
        }
      })
    },
    handleCancel() {
      this.close()
    },
    onChangeCheck(permission) {
      permission.indeterminate =
        !!permission.selected.length && permission.selected.length < permission.actionsOptions.length
      permission.checkedAll = permission.selected.length === permission.actionsOptions.length
    },
    onChangeCheckAll(e, permission) {
      Object.assign(permission, {
        selected: e.target.checked ? permission.actionsOptions.map((obj) => obj.value) : [],
        indeterminate: false,
        checkedAll: e.target.checked
      })
    },
    del(e) {
      console.log('删除', e)
    },
    disable() {},
    loadPermissions() {
      // const that = this
      // console.log(that)
      // this.$http
      //   .get('/sysPermission/getsyspermission')
      //   .then((res) => {
      //     console.log('下拉权限', res)
      //     if (res.code === 200) {
      //       this.RolesLists = res.result
      //       console.log('数据', this.RolesLists)
      //     }
      //   })
      //   .catch((err) => {
      //     console.log('出错', err)
      //   })
      // getPermissions().then(res => {
      //   const result = res.result
      //   that.permissions = result.map(permission => {
      //     const options = JSON.parse(permission.actionData) || []
      //     permission.checkedAll = false
      //     permission.selected = []
      //     permission.indeterminate = false
      //     permission.actionsOptions = options.map(option => {
      //       return {
      //         label: option.describe,
      //         value: option.action
      //       }
      //     })
      //     return permission
      //   })
      // })
    }
  }
}
</script>

<style scoped></style>
